{extend name="base" /}
{block name="content"}
<!--tab标签-->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class=""><a href="{:url('admin/auth_group/index')}">权限组</a></li>
                <li class=""><a href="{:url('admin/auth_group/add')}">添加权限组</a></li>
                <li class="layui-this">编辑权限组</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form layui-form-pane" action="{:url('admin/auth_group/updateAuthGroupRule')}" method="post">
                        {foreach name="auth_rule_list" item="v"}
                        <fieldset class="layui-elem-field">
                            <legend>{$v.title}<input type="checkbox" lay-filter="checkbox_one"  value="{$v.id}" name="menu[]" id="menu_{$v.id}" title="{$v.title}" {if condition="$v.checked==1"}checked=""{/if}></legend>
                            {foreach name="v['two']" item="vv"}
                            <div class="layui-form-item" style="padding-left: 10px;">
                                <label class="layui-form-label">{$vv.title}</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" lay-filter="checkbox_two"  value="{$vv.id}" name="menu[]" id="menu_{$v.id}_{$vv.id}" title="{$vv.title}" {if condition="$vv.checked==1"}checked=""{/if}>
                                    {foreach name="vv['three']" item="vvv"}
                                    {if condition="$vvv['four'] eq null"}
                                    <input type="checkbox" lay-filter="checkbox_three"  value="{$vvv.id}" name="menu[]" id="menu_{$v.id}_{$vv.id}_{$vvv.id}" title="{$vvv.title}" {if condition="$vvv.checked==1"}checked=""{/if}>
                                    {else/}
                                    <div class="layui-form-item" style="padding-top: 10px;margin-bottom:0px;">
                                        <label class="layui-form-label">{$vvv.title}</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" lay-filter="checkbox_three"  value="{$vvv.id}" name="menu[]" id="menu_{$v.id}_{$vv.id}_{$vvv.id}" title="{$vvv.title}" {if condition="$vvv.checked==1"}checked=""{/if}>
                                            {foreach name="vvv['four']" item="vvvv"}
                                            <input type="checkbox" lay-filter="checkbox_four" value="{$vvvv.id}" name="menu[]" id="menu_{$v.id}_{$vv.id}_{$vvv.id}_{$vvvv.id}" title="{$vvvv.title}" {if condition="$vvvv.checked==1"}checked=""{/if}>
                                            {/foreach}
                                        </div>
                                    </div>
                                    {/if}
                                    {/foreach}
                                </div>
                            </div>
                            {/foreach}
                        </fieldset>
                        {/foreach}
                        <input type="hidden" id="group_id" name="group_id" value="{$id}">
                        <button class="layui-btn" lay-submit lay-filter="*">授权</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['form'], function(){
        var form = layui.form;

        /**
         * 通用表单提交(AJAX方式)
         */
        form.on('submit(*)', function (data) {
            $.ajax({
                url: data.form.action,
                type: data.form.method,
                data: $(data.form).serialize(),
                success: function (info) {
                    if (info.code === 1) {
                        setTimeout(function () {
                            location.href = info.url;
                        }, 1000);
                    }
                    layer.msg(info.msg);
                }
            });
            return false;
        });

        //全选按钮
        form.on('checkbox(checkbox_one)', function(data){
            var child = $("[id^="+$(data.elem).eq(0).attr('id')+"]");
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        form.on('checkbox(checkbox_two)', function(data){
            var child_check = $(data.elem).eq(0).attr('id').split('_');

            var one=$("#"+child_check[0]+"_"+child_check[1]);
            one.prop('checked',true);

            var child = $("[id^="+$(data.elem).eq(0).attr('id')+"_]");
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });

            form.render('checkbox');
        });
        form.on('checkbox(checkbox_three)', function(data){
            var child_check = $(data.elem).eq(0).attr('id').split('_');

            var one=$("#"+child_check[0]+"_"+child_check[1]);
            one.prop('checked',true);

            var two=$("#"+child_check[0]+"_"+child_check[1]+"_"+child_check[2]);
            two.prop('checked',true);

            var child = $("[id^="+$(data.elem).eq(0).attr('id')+"_]");
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });

            form.render('checkbox');
        });
        form.on('checkbox(checkbox_four)', function(data){
            var child_check = $(data.elem).eq(0).attr('id').split('_');

            var one=$("#"+child_check[0]+"_"+child_check[1]);
            one.prop('checked',true);

            var two=$("#"+child_check[0]+"_"+child_check[1]+"_"+child_check[2]);
            two.prop('checked',true);

            var three=$("#"+child_check[0]+"_"+child_check[1]+"_"+child_check[2]+"_"+child_check[3]);
            three.prop('checked',true);

            form.render('checkbox');
        });
    });
</script>
{/block}